<template>
  <div class="dataList">
    <router-link to="/" class="myIconLeft">
      <a-icon type="left"></a-icon>
    </router-link>
    <div>
      <p>
        <span>当月出勤天数</span>
        <span>{{ countData.chuqinDay }}</span>
      </p>
      <p>
        <span>当月所需工时</span>
        <span>{{ countData.suoxuDay }}</span>
      </p>
      <p>
        <span>当月累计工时</span>
        <span>{{ countData.leijiDay }}</span>
      </p>
      <p>
        <span>当月工时盈余</span>
        <span>{{ countData.queshiDay }}</span>
      </p>
    </div>
    <a-table :columns="columns" :data-source="data">
      <span slot="firstTime" slot-scope="firstTime">{{ firstTime | formateTime }}</span>
      <span slot="endTime" slot-scope="endTime">{{ endTime | formateTime }}</span>
      <template slot="del" slot-scope="del,record,index">
        <!-- <a href="javascript:;" @click="delll(index)">Delete</a> -->
        <a-popconfirm
          title="确定删除?"
          ok-text="Yes"
          cancel-text="No"
          @confirm="delll(index)"
          @cancel="cancel"
        >
          <a href="#">Delete</a>
        </a-popconfirm>
      </template>
    </a-table>
  </div>
</template>
<script>
// 获取当前月份信息
function getNowDate() {
  let date = new Date();
  console.log(
    date.getFullYear() +
      "-" +
      String(date.getMonth() + 1).padStart(2, 0) +
      "-" +
      String(date.getDate()).padStart(2, 0)
  );
  return (
    date.getFullYear() +
    "-" +
    String(date.getMonth + 1).padStart(2, 0) +
    "-" +
    String(date.getDate).padStart(2, 0)
  );
}
const columns = [
  {
    title: "日期",
    dataIndex: "nowDate",
    key: "nowDate"
  },
  {
    title: "开始时间",
    dataIndex: "firstTime",
    key: "firstTime",
    scopedSlots: { customRender: "firstTime" }
  },
  {
    title: "结束时间",
    dataIndex: "endTime",
    key: "endTime",
    scopedSlots: { customRender: "endTime" },
    ellipsis: true
  },
  {
    title: "有效时间",
    dataIndex: "usedTime",
    key: "usedTime",
    ellipsis: true
  },
  {
    title: "操作",
    dataIndex: "del",
    key: "del",
    scopedSlots: { customRender: "del" }
  }
];

const data = [];
let workStartTime = "08:30:00"
function cTime(date, startTime, endTime) {
  // console.log("date, startTime, endTime--->", date, startTime, endTime);
  let beijianshu = 0; // 设置被减数
  // 计算结束时间
  if (endTime >= date + " 12:00:00" && endTime <= date + " 13:30:00") {
    endTime = date + " 12:00:00";
  } else if (endTime > date + " 13:30:00" && endTime <= date + " 18:00:00") {
    beijianshu = 1.5;
  } else if (endTime > date + " 18:00:00" && endTime <= date + " 18:30:00") {
    endTime = date + " 18:00:00";
    beijianshu = 1.5;
  } else if (endTime > date + " 18:30:00") {
    beijianshu = 2;
  }

  let usedTime = "";
  // 开始时间如果早于8点30得从8.30开始计时
  if (new Date(startTime) - new Date(date + " " + workStartTime) > 0) {
    usedTime =
      (new Date(endTime) - new Date(startTime)) / 3600 / 1000 - beijianshu;
  } else {
    usedTime =
      (new Date(endTime) - new Date(date + " " + workStartTime)) / 3600 / 1000 -
      beijianshu;
  }
  console.log(date + "--扣除--", beijianshu);
  return usedTime;
}

export default {
  data() {
    return {
      oDataList: [], // 源数据
      data,
      columns,
      countData: {
        chuqinDay: "",
        suoxuDay: "",
        leijiDay: "",
        queshiDay: ""
      }
    };
  },
  filters: {
    // 只显示时间不显示日期
    formateTime(val) {
      // console.log(val);
      return String(val).substring(10, val.length);
    }
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      this.$axios.get("/allData").then(res => {
        console.log("res.data.dataList-->", res.data.dataList);
        if (res.data && Array.isArray(res.data.dataList)) {
          this.oDataList = res.data.dataList.slice(0);
          // 当前月数据
          let xxx = getNowDate();
          this.data = res.data.dataList.map(itemm => {
            // console.log("itemm.nowDate-->", itemm.nowDate);
            itemm.usedTime = cTime(itemm.nowDate, itemm.firstTime, itemm.endTime);
            return {
              ...itemm
            };
          });
          this.jisuan(this.data);
        }
      });
    },
    jisuan(_arr) {
      this.countData.chuqinDay = _arr.length;
      this.countData.suoxuDay = _arr.length * 8;

      let leiji = 0;
      _arr.map(item => {
        leiji += item.usedTime;
      });
      this.countData.leijiDay = leiji;
      this.countData.queshiDay = leiji - this.countData.suoxuDay;
    },
    delll(index) {
      this.$axios.get("/del?index=" + index).then(res => {
        console.log(res);
        this.getData();
      });
    },
    cancel(e) {
      this.$message.error("取消删除");
    }
  }
};
</script>
<style >
.dataList {
  padding-top: 10px;
}
.myIconLeft {
  margin: 10px;
}
</style>